<!--
 * @Author: liujinjun681 liujinjun681@qq.com
 * @Date: 2022-07-25 10:25:43
 * @LastEditors: liujinjun681 liujinjun681@qq.com
 * @LastEditTime: 2022-07-26 16:57:28
 * @FilePath: \hd_ims_web\src\components\HdTagGroup\index.vue
 * @Description: 公用状态标志组、统一颜色标准
-->
<template>
  <div>
    <el-select
      v-model="val"
      filterable
      remote
      :value-key="keyName"
      clearable
      :placeholder="placeholder"
      :disabled="disabled"
      @change="changeZxpm"
      :remote-method="remoteMethod"
      :loading="loadingPmgg"
      style="width: 100%">
      <el-option v-for="item in optionsPmgg" :key="item.itmWldm" :label="item[keyName]" :value="item"></el-option>
    </el-select>
  </div>
</template>
<script>
import { getItmByInfo } from '@/api/project/materiel'
export default {
  name: 'HdSelectMaterial',
  props: {
    value: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    keyName: {
      type: String,
      default: 'itmWldm',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      val: '', // 用于存储选中的值，以便在重新加载数据时保持选中状态。
      optionsPmgg: [],
      loadingPmgg: false,
    }
  },
  created() {
    this.val = this.value
  },
  watch: {
    value(newVal) {
      this.val = newVal
    },
  },
  methods: {
    remoteMethod(query) {
      query = query.trim()
      if (query !== '') {
        this.loadingPmgg = true
        getItmByInfo({ desc: query, pageSize: 30, pageNum: 1 }).then((res) => {
          this.optionsPmgg = res.rows
          this.loadingPmgg = false
        })
      } else {
        this.optionsPmgg = []
      }
    },
    changeZxpm(val) {
      this.$emit('input', val[this.keyName])
      this.$emit('change', val)
    },
  },
}
</script>
<style lang="scss" module></style>
